<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<fmt:setBundle basename="baiwa.rta.language.common" />


<script type="text/javascript">
	$(document).ready(function() {
		$("#jMenu").jMenu({
			openClick : false,
			ulWidth : '220px',
			effects : {
				effectSpeedOpen : 200,
				effectSpeedClose : 200,
				effectTypeOpen : 'slide',
				effectTypeClose : 'slide',
				effectOpen : 'easeOutQuad',
				effectClose : 'linear'
			},
			TimeBeforeOpening : 100,
			TimeBeforeClosing : 100,
			animatedText : true,
			paddingLeft : 1
		});
		$("#aLogout").easyconfirm({
			locale : {
				width : 280,
				title : 'Confirmation',
				text : 'Do you want to logout ?'
			}
		});
// 		$(document).ajaxStart(function() {
// 			$.blockUI({
// 				message : '<img src="../images/icon_loading.gif" /><span> รอสักครู่ ... <span>',
// 				css : {
// 					border : 'solide',
// 					padding : '35px',
// 					backgroundColor : '#fff',
// 					'-webkit-border-radius' : '3px',
// 					'-moz-border-radius' : '3px',
// 					// opacity : .1,
// 					color : '#000'
// 				}
// 			});
// 		}).ajaxStop(function() {
// 			setTimeout(function() {
// 				$.unblockUI();
// 			}, 1000);
// 		});

	});
</script>

<style>

.header-background {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

#background1 {
/* 	background: url('../images/pattern-188m.png') repeat 0 0; */
	background-size: auto 120px;
 	height: 120px; 
/* 	background-color: #535e45; */
}


#cssmenu {
	/*      z-index: 99999999999; */
	border-top: 2px solid #2D6099;
}

.wrapper {
	position: relative;
}

.right,.left {
/* 	width: 50%; */
	position: absolute;
	line-height: 34px;
}

.right , a {
	right: 0;
/* 	color : white; */
/* 	text-transform: uppercase; */
	cursor: pointer;
	font-size: 12px;
	right: 5px;
	
}

.left {
	left: 0;
}


#hd-1 {
background: url('../images/header_3d.jpg') no-repeat 0 0;
/* background-size: 340px; */
height: 120px; 

}

</style>

<div id="header_container">
	<div id="header">
	
  	<div id="confirm" class="confirm" title="xxxxx" hidden="">
    </div>
    
		<div style=" height: 120px;">
			<div class="header-background" id="background1"></div>
<!-- 			<img src="../images/header1.png" > -->
			<div  id="hd-1"></div>
		</div>
		
		
		
		<!-- 		<div style="width: 100%; height: 180px;"> -->
		<!-- 	<div
				style="width: 100%; 
 				text-align: center; border: 0px #000 solid; 
				background-image: url('../images/mrms_header.jpg'); background-repeat: no-repeat; 
				background-position: center; background-size: 50%; 
			    width: 100%;
				height: 180px;"
				align="right">
			</div> -->
<!-- 		</div> -->


		<s:set var="userMng">${objUserRole.userGrant=='N' ? 'hide' : 'xxx'}</s:set>
		<s:set var="accountMng">${objUserRole.accountGrant=='N' ? 'hide' : 'xxx'}</s:set>
		<s:set var="resultPlanMng">${objUserRole.resultPlanGrant=='N' ? 'hide' : 'xxx'}</s:set>
		
		<s:set var="userGrant">${objUserRole.userGrant!='RW' ? 'disabled' : '-'}</s:set>
		<s:set var="accountGrant">${objUserRole.accountGrant!='RW' ? 'disabled' : '-'}</s:set>
		<s:set var="resultPlanGrant">${objUserRole.resultPlanGrant!='RW' ? 'disabled' : '-'}</s:set>
		
		<script type="text/javascript">
			_COMMON.isUserHide = "${objUserRole.userGrant!='RW' ? 'disabled' : '-'}";
			_COMMON.isAccountHide = "${objUserRole.accountGrant!='RW' ? 'disabled' : '-'}";
			_COMMON.isResultPlanHide = "${objUserRole.resultPlanGrant!='RW' ? 'disabled' : '-'}";
		</script>
		
<%-- 		USER : [${objUserRole.userGrant}], ROOM  : [${objUserRole.accountGrant}], RESIDENT :[${objUserRole.resultPlanGrant}] --%>
		
	<div class="wrapper">
			<div id="cssmenu" style="width: 100%; float: left;">
				<ul id="jMenu">

					<li class="${userMng}"><a><i class="fa fa-user fa-lg"></i>&nbsp;&nbsp;<fmt:message key="menu.label.user_manage" /></a>
						<ul>
							<li><a href="../user/USR001"><i	class="fa fa-chevron-circle-right fa-lg"></i>&nbsp;&nbsp;<fmt:message key="menu.label.user" /></a></li>
							<li><a href="../role/ROL001"><i class="fa fa-chevron-circle-right fa-lg"></i>&nbsp;&nbsp;<fmt:message key="menu.label.role" /></a></li>
						</ul></li>
					<li class="${accountMng}"><a><i class="fa fa-credit-card fa-lg"></i>&nbsp;&nbsp;<fmt:message key="menu.label.acc_manage" /></a>
						<ul>
							<li><a href="../account/ACC001"><i	class="fa fa-chevron-circle-right fa-lg"></i>&nbsp;&nbsp;<fmt:message key="menu.label.acc_001" /></a></li>
							<li><a href="../account/ACC002"><i class="fa fa-chevron-circle-right fa-lg"></i>&nbsp;&nbsp;<fmt:message key="menu.label.acc_002" /></a></li>
						</ul></li>
						
					<li class="${resultPlanMng}"><a><i class="fa fa-sitemap fa-lg"></i>&nbsp;&nbsp;<fmt:message key="menu.label.resultplan_manage" /></a>
						<ul style="width: 320px !important;">
							<li><a href="../resultPlan/RP001"><fmt:message key="menu.label.resultplan_001" /></a></li>
							<li><a href="../resultPlan/RP002"><fmt:message key="menu.label.resultplan_002" /></a></li>
							<li><a href="../resultPlan/RP003"><fmt:message key="menu.label.resultplan_003" /></a></li>
						</ul></li>
					 
				</ul>

			</div>
			<div class="right">
<!-- 				<a href="?language=th" class="navcontent"><img -->
<%-- 					src="../images/flag-th.png" width="25" ${language != 'th'? 'style="opacity: 0.5;"':''}></a> &nbsp; --%>
<!-- 				<a href="?language=en"  class="navcontent"><img -->
<%-- 					src="../images/flag-en.png" width="25" ${language == 'th'? 'style="opacity: 0.5;"':''}> </a> &nbsp; --%>
				  <a href="../logout" id="aLogout"> <fmt:message key="login.label.logout" />&nbsp;&nbsp;<i class="fa fa-sign-out fa-lg"></i>&nbsp;</a>
			</div>
<!-- 						<div class="right"><a href="../logout" >&nbsp;TH</a> / <a href="../logout" >&nbsp;EN</a> </div> -->
		</div>
	</div>
</div>